<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<table class="layui-hide" id="test" lay-filter="test"></table>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">添加</button>
    </div>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script src="/layuiadmin/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script language='javascript' th:inline="javascript">
    layui.use('table', function(){
        let table = layui.table;
        let layer=layui.layer;
        let laypage=layui.laypage;
        let $=layui.jquery;

        let data=[[${userinfoList}]];
        //展示已知数据
        table.render({
            elem: '#test'
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,cols: [
                [ //标题栏
                    {field: 'id', title: 'ID', width: 80}
                    ,{field: 'name', title: '用户名', minWidth: 80}
                    ,{field: 'url', title: '状态', minWidth: 30}
                    ,{field: 'img', title: '邮箱', width: 80}
                    ,{field:'id', title: '操作', width:200,toolbar:"#barDemo"}
                ]
            ]
            ,data: data.records
            ,limit: 5, //每页默认显示的数量
            done: function(res, curr, count){
                //完整功能
                laypage.render({
                    elem: 'demo7'
                    ,count: data.total
                    ,curr: data.current
                    ,limit: data.size
                    ,layout: ['count', 'prev', 'page', 'next', 'refresh', 'skip']
                    ,jump: function(obj,first){
                        if (!first) {
                            let href = '/platform/systime/list?';
                            href += 'pageNo=' + obj.curr;
                            href += '&pageSize=' + obj.limit;
                            window.location.replace(href);
                        }
                    }
                });
            }
        });
        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'getCheckData':
                    layer.open({
                        type: 2
                        ,title: '添加系统'
                        ,content: '/platform/systime/inster'
                        ,maxmin: true
                        ,area: ['700px', '500px']
                        ,btn: ['确定', '取消']
                        ,yes: function(index, layero) {
                            let formSubmit=layer.getChildFrame('form', index);
                            console.log(formSubmit)
                            let submited = formSubmit.find('#LAY-user-back-submit')[0];
                            console.log(submited)
                            submited.click();
                            layer.close(index); //关闭弹层
                            location.reload();
                        }
                    });
                    break;
                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            };
        });
        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            //console.log(obj)
            if(obj.event === 'del'){
                layer.open({
                    type: 2
                    ,title: '修改菜单'
                    ,content: '/platform/systime/update?id='+data.id
                    ,maxmin: true
                    ,area: ['700px', '500px']
                    ,btn: ['确定', '取消']
                    ,yes: function(index, layero) {
                        let formSubmit=layer.getChildFrame('form', index);
                        console.log(formSubmit)
                        let submited = formSubmit.find('#LAY-user-back-submit')[0];
                        console.log(submited)
                        submited.click();
                        layer.close(index); //关闭弹层
                        location.reload();
                    }
                });
            } else if(obj.event === 'edit'){
                layer.open({
                    type: 2
                    ,title: '修改菜单'
                    ,content: '/platform/systime/update?id='+data.id
                    ,maxmin: true
                    ,area: ['700px', '500px']
                    ,btn: ['确定', '取消']
                    ,yes: function(index, layero) {
                        let formSubmit=layer.getChildFrame('form', index);
                        console.log(formSubmit)
                        let submited = formSubmit.find('#LAY-user-back-submit')[0];
                        console.log(submited)
                        submited.click();
                        layer.close(index); //关闭弹层
                        location.reload();
                    }
                });
            }
        });
    });
</script>

</body>
</html>